<!-- 职业认证 -->
<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="1" active-color="#00C6C2"></uni-steps> 
		</view>
		<!-- 内容 -->
		<view class="conts">
			<!-- 所属行业 -->
			<view class="conts_box_text1">
				<view>
					<text class="box_text1">所属行业</text>
				</view>
				<view>
					<text class="box_text2">示例照片</text>
					<text class="icon iconfont">&#xe627;</text>
				</view>
			</view>
			<!-- //下拉选择 -->
			<view  style="display: flex;">
				<view style="margin-right: 49rpx;">
					<picker @change="examinationType" :range="examinationTypeArray">
							<view class="selec">
								<view class="selec_text">{{ examinationTypeArrayType }}</view>
								<view class="selec_text2">
									<text class="icon iconfont">&#xe603;</text>
								</view>
							</view>
					          
					</picker>
				</view>
				<view>
					<picker @change="examinationType1" :range="examinationTypeArray1">
							<view class="selec">
								<view class="selec_text">{{ examinationTypeArrayType1 }}</view>
								<view class="selec_text2">
									<text class="icon iconfont">&#xe603;</text>
								</view>
							</view>
					          
					</picker>
				</view>
					

			</view>
			<!-- 职业资格证 -->
			<view class="zhiye_shu">
				<view class="zhiye_shu_text">职业资格证</view>
				<view class="zhiye_shu_text1">
					信息仅用于职业和等级验证，提供你最高级别的职业等级证书；
				</view>
				<view class="id_pic">
					<view class="pic">
						<image src="../../static/renzheng/zgs1.png" mode=""></image>
						<view class="upface">
							<text>+ 点击上传人面像</text>
						</view>
					</view>
					<view class="pic">
						<image src="../../static/renzheng/zgs2.png" mode=""></image>
						<view class="upface">
							<text>+ 点击上传人面像</text>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<!-- //证书信息 -->
		<view class="books_infor">
			证书信息
		</view>
		<!-- 信息填写 -->
		<view class="inforPull">
			<view class="message">
				<view class="name">证件姓名</view>
				<view class="Input">
					<input type="text" placeholder="请输入证件姓名" v-model="form.name">
				</view>
			</view>
			
			<view class="message">
				<view class="name">取证时间</view>
				<view class="Input">
					<input type="text" placeholder="获得证书的时间 2020/02/22" v-model="form.time">
				</view>
			</view>
			<view class="message">
				<view class="name">证件编号</view>
				<view class="Input">
					<input type="text" placeholder="请输入证书的编号" v-model="form.code">
				</view>
			</view>
			
			
			<view class="tos" @click="gotos1">
				跳过证书认证
			</view>
			<view class="veri-2" >
				<view class="back" @click="backs">上一步</view>
				<view @click="gotos">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data(){
			return{
				option:[{title:'身份认证'},{title:'职业认证'},{title:'合作协议'},{title:'结算信息'}],
				examinationTypeArray:['---请选择---','美发','美容','美甲','美妆','美体'],
				examinationTypeIndex:0,
				examinationTypeArrayType:'美发',
				examinationTypeArray1:['---请选择---','初级','中级','高级','专业'],
				examinationTypeIndex1:0,
				examinationTypeArrayType1:'等级',
				form:{
					name:'',
					time:'',
					code:''
				}
			}
		},
		methods:{
			 examinationType(e) {
			    this.examinationTypeIndex = e.target.value;
			    this.examinationTypeArrayType=this.examinationTypeArray[this.examinationTypeIndex]
				},
				examinationType1(e) {
				   this.examinationTypeIndex1 = e.target.value;
				   this.examinationTypeArrayType1=this.examinationTypeArray1[this.examinationTypeIndex1]
								},
			//上一步
			backs(){
				uni.navigateBack({
				    delta: 1
				});
			},
			//下一步
			gotos(){
				
				 //验证是否输入
				 for(let key in this.form){
					 if(this.form[key] ==''){
						 uni.showToast({
						 	icon:'none',
						 	title:'请核实输入信息'
						 })
						 return
					 }
				 }
				 //验证输入日期
				  let reg = /^(\d{4})\/(\d{2})\/(\d{2})$/;
				  if(!reg.test(this.form.time)){
				 	 uni.showToast({
				 	 	icon:'none',
				 		title:'请输入正确的时间格式,如：2020/02/02'
				 	 })
				 	 return
				  }
				uni.navigateTo({
					url:'./cooperation'
				})
			},
			//跳过认证
			gotos1(){
				uni.navigateTo({
					url:'./cooperation'
				})
			}
		}
	}
</script>
<style>
	page{
		
			background-color: #F3F3F3;
	
	}
</style>
<style scoped lang="less">
	//步骤
	.step{
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}
	//内容
	.conts{
		background: white;
		margin-top: 15rpx;
		padding: 27rpx 26rpx;
		.conts_box_text1{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 45rpx;
			.box_text1{
				
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;
			}
			.box_text2{
				margin-right: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #979797;
			}
			.iconfont{
				color: #979797;
				font-size: 22rpx;
			}
					
			}
	//下拉选择
	.selec{
		display: flex;
		.selec_text{
			width: 121rpx;
			height: 50rpx;
			border: 1rpx solid #414141;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			text-align: center;
			line-height: 50rpx;
			
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #414141;
			line-height: 44rpx;
		}
		.selec_text2{
			width: 31rpx;
			height: 50rpx;
			background: #414141;
			border: 1rpx solid #414141;
			border-radius: 0px 4rpx 4rpx 0px;
			text-align: center;
			line-height: 36rpx;
			.iconfont{
				color: #00C6C2;
				font-size: 22rpx;
			}
		}
	}
	//职业资格证书
	.zhiye_shu{
		margin-top: 50rpx;
		.zhiye_shu_text{
			
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
		}
		.zhiye_shu_text1{
			margin-top: 10rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #979797;
		}
		.id_pic{
			display: flex;
			// padding: 34rpx 24rpx;
			justify-content: space-between;
			// background: #F3F3F3;
			margin-top: 10rpx;
			border-radius: 4rpx;
			.pic{
				width: 347rpx;
				height: 234rpx;
				padding: 21rpx 22rpx;
				border: 1rpx dashed #000000;
				background: #F3F3F3;
				border-radius: 4rpx;
				margin-right: 5rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.upface{
					width: 212rpx;
					height: 50rpx;
					background: #414141;
					opacity: 0.6;
					border-radius: 4rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -106rpx;
					margin-top: -25rpx;
					text-align: center;
					line-height: 38rpx;
					text{						
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	}
	//证书信息
	.books_infor{
		padding: 23rpx 26px;
		background: #F3F3F3;
		border-radius: 4px;
		
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #818181;
	}
	.inforPull{
		// 
		background: white;
		.message{
			// width: 100%;
			padding: 31rpx 26rpx;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			.name{
				flex: 0.5;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
			.Input{
				float: 6;
				flex: auto;
				input{
					
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}
		}
		.btm-ver{
			padding: 20rpx;
			color: #666;
			background-color:#F1F1F1;
			font-size: 24rpx;
		}
		.veri{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.veri-1{
				width: 20%;
				display: flex;
				align-items: center;
				
				image{
					width: 10rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}
		.tos{
			display: flex;
			justify-content: center;
			padding-top: 39rpx;
			background: #F3F3F3;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6F6F6F;
			padding-bottom: 80rpx;
		}
		.veri-2{
			padding: 30rpx;
			background-color: #F1F1F1;
			display: flex;
			.back{
				background: #F3F3F3;
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #414141;
				border: 1rpx solid #414141;
				border-radius: 4rpx 0px 0rpx 4px;
			}
			view{
				width: 100%;
				background-color:#00c6c2;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
